<template>
  <div class="auth-container">
    <div class="auth-card" style="width: 700px; padding: 30px;">
      <h2 class="register-title">用户注册</h2>
      
      <el-steps :active="activeStep" align-center>
        <el-step title="角色选择" />
        <el-step title="基本信息" />
        <el-step title="链上注册" />
      </el-steps>
      
      <!-- 第一步：角色选择 -->
      <div v-if="activeStep === 1" class="step-content">
        <div class="role-selection">
          <h3>请选择您的角色</h3>
          <div class="role-cards">
            <el-card 
              class="role-card" 
              :class="{ 'selected': selectedRole === 'patient' }"
              @click="selectRole('patient')"
            >
              <div class="role-icon">
                <el-icon><User /></el-icon>
              </div>
              <h4>患者</h4>
              <p>注册为患者用户，管理个人病历信息</p>
            </el-card>
            
            <el-card 
              class="role-card" 
              :class="{ 'selected': selectedRole === 'doctor' }"
              @click="selectRole('doctor')"
            >
              <div class="role-icon">
                <el-icon><FirstAidKit /></el-icon>
              </div>
              <h4>医生</h4>
              <p>注册为医生用户，管理患者病历信息</p>
            </el-card>
            
            <el-card 
              class="role-card" 
              :class="{ 'selected': selectedRole === 'admin' }"
              @click="selectRole('admin')"
            >
              <div class="role-icon">
                <el-icon><Setting /></el-icon>
              </div>
              <h4>管理员</h4>
              <p>注册为管理员，管理系统用户和医院信息</p>
            </el-card>
          </div>
          
          <div class="action-buttons">
            <el-button 
              type="primary" 
              class="next-btn"
              :disabled="!selectedRole"
              @click="nextStep"
            >
              下一步
            </el-button>
          </div>
          
          <div class="link-text">
            <span>已有账号？</span>
            <el-link type="primary" @click="returnToLogin">返回登录</el-link>
          </div>
        </div>
      </div>
      
      <!-- 第二步：基本信息 -->
      <div v-if="activeStep === 2" class="step-content">
        <el-form 
          :model="basicForm" 
          label-width="100px" 
          class="register-form"
          ref="formRef"
        >
          <!-- 患者字段 -->
          <template v-if="selectedRole === 'patient'">
            <el-form-item label="用户名" required>
              <el-input 
                v-model="basicForm.username" 
                placeholder="请输入用户名" 
                size="large"
              />
            </el-form-item>
            
            <el-form-item label="手机号" required>
              <el-input 
                v-model="basicForm.phone" 
                placeholder="请输入手机号" 
                size="large"
              />
            </el-form-item>
          </template>
          
          <!-- 医生字段 -->
          <template v-else-if="selectedRole === 'doctor'">
            <el-form-item label="用户名" required>
              <el-input 
                v-model="basicForm.username" 
                placeholder="请输入用户名" 
                size="large"
              />
            </el-form-item>
            
            <el-form-item label="手机号" required>
              <el-input 
                v-model="basicForm.phone" 
                placeholder="请输入手机号" 
                size="large"
              />
            </el-form-item>
            
            <el-form-item label="医院" required>
              <el-input 
                v-model="basicForm.hospital" 
                placeholder="请输入所在医院" 
                size="large"
              />
            </el-form-item>
            
            <el-form-item label="科室" required>
              <el-input 
                v-model="basicForm.department" 
                placeholder="请输入所在科室" 
                size="large"
              />
            </el-form-item>
            
            <el-form-item label="职称" required>
              <el-input 
                v-model="basicForm.title" 
                placeholder="请输入职称" 
                size="large"
              />
            </el-form-item>
          </template>
          
          <!-- 管理员字段 -->
          <template v-else-if="selectedRole === 'admin'">
            <el-form-item label="用户名" required>
              <el-input 
                v-model="basicForm.username" 
                placeholder="请输入用户名" 
                size="large"
              />
            </el-form-item>
            
            <el-form-item label="医院" required>
              <el-input 
                v-model="basicForm.hospital" 
                placeholder="请输入所属医院" 
                size="large"
              />
            </el-form-item>
          </template>
          
          <!-- 公共密码字段 -->
          <el-form-item label="密码" required>
            <el-input 
              v-model="basicForm.password" 
              type="password" 
              placeholder="请输入密码"
              show-password
              size="large"
            />
          </el-form-item>
          
          <el-form-item label="确认密码" required>
            <el-input 
              v-model="basicForm.confirmPassword" 
              type="password" 
              placeholder="请再次输入密码"
              show-password
              size="large"
            />
          </el-form-item>
          
          <el-form-item class="form-actions">
            <el-button @click="prevStep" size="large">上一步</el-button>
            <el-button type="primary" @click="nextStep" size="large">下一步</el-button>
          </el-form-item>
        </el-form>
        
        <div class="link-text">
          <span>已有账号？</span>
          <el-link type="primary" @click="returnToLogin">返回登录</el-link>
        </div>
      </div>
      
      <!-- 第三步：链上注册 -->
      <div v-if="activeStep === 3" class="step-content">
        <el-form :model="chainForm" label-width="120px" class="register-form">
          <el-form-item label="生成密钥">
            <el-button 
              type="primary" 
              @click="generateKey"
              size="large"
            >
              生成密钥
            </el-button>
            <div v-if="generatedKey" class="key-display">
              <p>对称加密密钥: <span class="key-value">{{ generatedKey }}</span></p>
            </div>
          </el-form-item>
          
          <el-form-item label="输入密码" required>
            <el-input 
              v-model="chainForm.password" 
              type="password" 
              placeholder="请输入密码"
              show-password
              size="large"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button 
              type="primary" 
              @click="generateAddress"
              size="large"
            >
              生成地址
            </el-button>
            <div v-if="blockchainAddress" class="address-display">
              <p>区块链账户地址: <span class="address-value">{{ blockchainAddress }}</span></p>
            </div>
          </el-form-item>
          
          <el-form-item class="form-actions">
            <el-button @click="prevStep" size="large">上一步</el-button>
            <el-button 
              type="success" 
              @click="submitRegistration"
              :disabled="!blockchainAddress"
              size="large"
            >
              提交注册
            </el-button>
          </el-form-item>
        </el-form>
        
        <div class="link-text">
          <span>已有账号？</span>
          <el-link type="primary" @click="returnToLogin">返回登录</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/store'
import { User, FirstAidKit, Setting } from '@element-plus/icons-vue'

const authStore = useAuthStore()
const router = useRouter()
const activeStep = ref(1)
const selectedRole = ref('patient')
const generatedKey = ref('')
const blockchainAddress = ref('')

const basicForm = ref({
  username: '',
  phone: '',
  password: '',
  confirmPassword: '',
  // 医生特有
  hospital: '',
  department: '',
  title: '',
})

const chainForm = ref({
  password: ''
})

const selectRole = (role) => {
  selectedRole.value = role
}

const nextStep = () => {
  if (activeStep.value === 1 && !selectedRole.value) {
    ElMessage.error('请选择角色')
    return
  }
  
  if (activeStep.value === 2) {
    // 表单验证逻辑
    let valid = true
    
    // 通用验证
    if (!basicForm.value.username) {
      ElMessage.error('请输入用户名')
      return
    }
    
    if (!basicForm.value.password) {
      ElMessage.error('请输入密码')
      return
    }
    
    if (!basicForm.value.confirmPassword) {
      ElMessage.error('请确认密码')
      return
    }
    
    if (basicForm.value.password !== basicForm.value.confirmPassword) {
      ElMessage.error('两次输入的密码不一致')
      return
    }
    
    // 角色特有验证
    if (selectedRole.value === 'patient') {
      if (!basicForm.value.phone) {
        ElMessage.error('请输入手机号')
        return
      }
    }
    
    if (selectedRole.value === 'doctor') {
      if (!basicForm.value.phone) {
        ElMessage.error('请输入手机号')
        return
      }
      
      if (!basicForm.value.hospital) {
        ElMessage.error('请输入医院')
        return
      }
      
      if (!basicForm.value.department) {
        ElMessage.error('请输入科室')
        return
      }
      
      if (!basicForm.value.title) {
        ElMessage.error('请输入职称')
        return
      }
    }
    
    if (selectedRole.value === 'admin') {
      if (!basicForm.value.hospital) {
        ElMessage.error('请输入医院')
        return
      }
    }
    
    // 检查用户名是否已注册
    if (authStore.registeredUsers.some(user => user.username === basicForm.value.username)) {
      ElMessage.error('该用户名已被注册')
      return
    }
  }
  
  activeStep.value += 1
}

const prevStep = () => {
  if (activeStep.value > 1) {
    activeStep.value -= 1
  }
}

const returnToLogin = () => {
  router.push('/login')
}

const generateKey = () => {
  // 模拟生成密钥
  generatedKey.value = 'AES-256-CBC:7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069'
  ElMessage.success('密钥生成成功')
}

const generateAddress = () => {
  if (!chainForm.value.password) {
    ElMessage.error('请输入密码')
    return
  }
  
  // 模拟生成区块链地址
  blockchainAddress.value = '0x742d35Cc6634C0532925a3b844Bc454e4438f44e'
  ElMessage.success('区块链地址生成成功')
}

const submitRegistration = () => {
  // 提交注册
  authStore.register({
    ...basicForm.value,
    role: selectedRole.value,
    blockchainAccount: blockchainAddress.value
  })
  
  ElMessage.success('注册成功！即将跳转到登录页面')
  
  // 模拟延迟后跳转
  setTimeout(() => {
    router.push('/login')
  }, 2000)
}
</script>

<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
}

.auth-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.register-title {
  text-align: center;
  margin-bottom: 20px;
  color: #1e5799;
  font-size: 24px;
}

.step-content {
  margin-top: 30px;
}

.register-form {
  max-width: 600px;
  margin: 0 auto 20px;
}

.role-selection {
  text-align: center;
  padding: 10px;
}

.role-selection h3 {
  margin-bottom: 20px;
  color: #333;
  font-size: 18px;
}

.role-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.role-card {
  width: 200px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
}

.role-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.role-card.selected {
  border: 2px solid #1e5799;
  background-color: #f5f7fa;
}

.role-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  background: #e6f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.role-icon .el-icon {
  font-size: 28px;
  color: #1e5799;
}

.role-card h4 {
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
}

.role-card p {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.action-buttons {
  margin: 20px 0;
}

.next-btn {
  width: 150px;
  height: 40px;
  background-color: #1e5799;
  border: none;
  font-size: 16px;
}

.form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.key-display, .address-display {
  margin-top: 15px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
}

.key-value, .address-value {
  font-family: monospace;
  word-break: break-all;
  color: #1e5799;
}

.link-text {
  text-align: center;
  font-size: 14px;
  color: #606266;
  margin-top: 10px;
}

.link-text .el-link {
  margin-left: 5px;
  color: #1e5799;
  font-weight: 500;
}
</style>